<!--
组件名称：排名
-->
<template>
  <div class="rank-item" :class="[rankClass, { small }]">
    <slot>{{ index }}</slot>
  </div>
</template>
<script>
export default {
  name: 'RankItem',
  props: {
    index: Number,
    small: Boolean
  },
  computed: {
    rankClass () {
      let className = ''
      switch (this.index) {
        case 1:
          className = 'first'
          break
        case 2:
          className = 'second'
          break
        case 3:
          className = 'third'
          break
        default:
          className = 'normal'
          break
      }
      return className
    }
  }
}
</script>
<style lang="scss" scoped>
  .rank-item {
    width: 22px;
    height: 22px;
    margin: auto;
    border-radius: 999px;
    text-align: center;
    line-height: 22px;
    font-size: 16px;
    color: #000;
    background-color: #0CF7BA;
    &.first {
      background-color: #FF568E;
      color: #FFF;
    }
    &.second {
      background-color: #FFAF31;
      color: #FFF;
    }
    &.third {
      background-color: #806EFA;
      color: #FFF;
    }
    &.small {
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
    }
  }
</style>
